<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/my.css" rel="stylesheet"/>
	<style>
		h5 {
			margin: 5px 7px;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav bc2">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">动态搜索</h1>
	</header>
	<div class="mui-content bc">
		<div class="mui-content-padded" style="margin: 8%;">
			<div class="mui-input-row mui-search">
				<input type="search" class="mui-input-clear" placeholder="请输入书名@#作者" onkeydown="search();" id="key">
			</div>
		</div>
		<div class="mui-card" style="margin: 8%;">
		    <ul class="mui-table-view bc2" id="dataList">
		        <li class="mui-table-view-divider">使用说明</li>
		        <li class="mui-table-view-cell bc2">
					<p>
						动态搜索使用场景仅为普通搜索未找到目标数据，然后尝试进行深度数据检索获取。
						<br /><br />对比普通搜索，动态搜索检索用时较长；
						<br /><br />动态搜索根据书名和作者准确检索，不会出现相似结果，目标结果数为1；
						<br /><br />动态搜索如检索到目标数据后，会录入到普通搜索的结果中；
						<br /><br />由于检索时间稍长，可以提交搜索后，返回其他界面，稍后通过普通搜索再次搜索。
					</p>
				</li>
		    </ul>
		</div>
	</div>
</body>
<script src="js/config.js"></script>
<script src="js/book.js"></script>
<script type="text/javascript" charset="utf-8">
	mui.init();
	var flag = false;
	function search(){
		if (event.keyCode == 13) {
			if(flag){
				mui.toast('正在检索，请等待...', {
					duration: 'short',
					type: 'div'
				})
				return;
			}
			var key = document.getElementById("key").value;
			if (key == "") return;
			if (key.indexOf("@#") == -1){
				mui.toast('请输入书名@#作者', {
					duration: 'short',
					type: 'div'
				})
				return;
			}
			mui.toast('开始检索', {
				duration: 'short',
				type: 'div'
			})
			flag = true;
			key = encodeURIComponent(key);
			mui.ajax(config.config.path + "/book/getBooks2?bookName=" + key, {
				type: "GET",
				dataType: "json",
				success: function(result) {
					var code = result.code;
					if (code == 404) {
						mui.alert('未找到相关书籍，您可在主页右上角->意见反馈，联系管理员反馈情况。','提示','知道了',null,'div')
					} else if (code == 400) {
						if(result.message == "书籍已存在"){
							mui.toast('书籍已存在，请使用普通搜索检索', {
								duration: 'short',
								type: 'div'
							})
						}else{
							mui.toast(result.message, {
								duration: 'short',
								type: 'div'
							})
						}
					} else if (code == 200) {
						var ele = document.getElementById("dataList");
						var top = '<li class="mui-table-view-divider">搜索结果</li>';
						var data = "";
						data = data + ' <li class="mui-table-view-cell bc2" onclick="book(' + result.data.id + ','+result.data.number+')">' + result.data.name + '<span class="mui-badge">' + result.data.author + '</span></li>';
						data = data.replace(new RegExp(key, 'g'), '<font color="red">'+key+'</font>');
						ele.innerHTML = top + data;
					}
					flag = false;
				},
				error:function(result){
					flag = false;
				}
			});
		}
	}
</script>
</html>